<template>
  <canvas ref="starsCanvas" id="starsCanvas"></canvas>
</template>

<script>
export default {
  name: 'StarCanvas',
  data() {
    return {
      starsCount: 100, // 根据需要调整星星的数量
      searchInput: '', // 绑定搜索框输入
      selectedOption: 'paper', // 绑定下拉框选项
    };
  },
  computed: {
    dynamicPlaceholder() {
      // 根据选中的选项动态生成 placeholder
      return `Search ${this.selectedOption}...`;
    },
  },
  mounted() {
    this.animateStars();
  },
  methods: {
    animateStars() {
      const starsCanvas = this.$refs.starsCanvas;
      const ctx = starsCanvas.getContext('2d');
      const stars = [];
      const colors = ['#63e7d8', '#f7f7b8', '#fefdfd', '#dcdcd9', '#c6b6a2'];

      for (let i = 0; i < this.starsCount; i++) {
        const star = {
          x: Math.random() * starsCanvas.width,
          y: Math.random() * starsCanvas.height,
          radius: 0.2 + Math.random() * 0.8,
          color: colors[Math.floor(Math.random() * colors.length)],
          speed: Math.random() * 0.5 + 0.1,
          opacity: Math.random() * 0.5 + 0.5,
        };
        stars.push(star);
      }

      function drawStar(star) {
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
        ctx.fillStyle = star.color;
        ctx.globalAlpha = star.opacity;
        ctx.fill();
      }

      function updateStars() {
        for (let i = 0; i < stars.length; i++) {
          stars[i].x += stars[i].speed;
          if (stars[i].x > starsCanvas.width) {
            stars[i].x = 0;
          }
        }
      }

      function animate() {
        ctx.clearRect(0, 0, starsCanvas.width, starsCanvas.height);
        for (let i = 0; i < stars.length; i++) {
          drawStar(stars[i]);
        }
        updateStars();
        requestAnimationFrame(animate);
      }

      animate();
    },
  },
};
</script>

<style scoped>
#starsCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background-color: var(--back-color);
}
</style>